const template = `
<template>
  <div class="page-container">
    <div class="page-container-center flex">
      <div
        class="page-container-row"
        :class="item.autoHeight ? 'flex-1' : ''"
        v-for="(item, i) in pageConfig"
        :key="i"
      >
        <component :config="item" :is="getComponents(i)" @change="change">
        </component>
      </div>
    </div>
  </div>
</template>
<script setup>
/**
 *  页面配置对象
 */
const pageConfig = ref({pageConfig});

/**
 * 遍历所有属性模板
 */
const modules = import.meta.glob("@/components/Designer/Template/**/*");
const M = {};
Object.keys(modules).forEach(async (key) => {
  const k = key
    .replace("./componentsr/Designe/Template/", "")
    .replace(".vue", "");
  const module = await modules[key]();
  M[k] = markRaw(module.default);
});

/**
 * 获取组件
 */
const getComponents = (key) => {
  const path = key.substr(0, 1).toUpperCase() + key.substr(1);
  return M[path];
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  flex-wrap: wrap;
}
.flex-1 {
  flex: 1;
}
.page-container {
  height: 100%;
  width: 960px;
  .page-container-center {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    flex-direction: column;
    &.pc {
      width: 100%;
    }
    &.iphone {
      width: 480px;
    }
  }
  .page-container-row {
    position: relative;
    width: 100%;
  }
  iframe {
    width: 100%;
    height: 100%;
  }
}
</style>
`

export default template;